<template>
  <v-layout row fill-height align-center justify-center wrap>
      <v-flex md12 lg12>
    <v-text-field v-model="s" @keyup="search" placeholder="输入姓名、电话等"></v-text-field>
    </v-flex>
    <v-flex md12 lg12>
    <v-data-table
        :headers="headers"
        :items="employees"
        :pagination.sync="pagination"
        :total-items="totalEmployees"
        :loading="loading"
        class="elevation-1"
    >
        <template slot="items" slot-scope="props">
        <td>{{ props.item.id }}</td>
        <td class="text-xs-left">{{ props.item.name }}</td>
        <td class="text-xs-left">{{ props.item.gender?'女':'男' }}</td>
        <td class="text-xs-left">{{ props.item.birth_date }}</td>
        <td class="text-xs-left">{{ props.item.department.name }}</td>
        <td class="text-xs-left">{{ props.item.work_phone }}</td>
        <td class="text-xs-left">{{ props.item.mobile_phone }}</td>
        <td class="text-xs-left">
            <!-- <v-btn :to="'/employees/'+props.item.emp_id">详情</v-btn> -->
            <v-tooltip bottom>
                <v-btn small fab color="info"  slot="activator" @click.stop="showEmp(props.item.id)"><v-icon>person</v-icon></v-btn>
                <span>详情</span>
            </v-tooltip>
            <v-tooltip bottom>
                <v-btn small fab color="primary" slot="activator" @click.stop="editEmp(props.item.id)"><v-icon>edit</v-icon></v-btn>
                <span>修改</span>
            </v-tooltip>
            <v-tooltip bottom>
                <v-btn small fab color="error" slot="activator" @click.stop="confirmDeletingEmp(props.item.id)"><v-icon>delete</v-icon></v-btn>
                <span>删除</span>
            </v-tooltip>
        </td>
        </template>
        <template slot="footer">
        <td colspan="100%">
            <strong>这里是页脚</strong>
        </td>
        </template>
    </v-data-table>
    </v-flex>
    <EmployeeDetailsDlg :show="showDetails" :employee="selectedEmployee"/>
    <EmployeeEditDlg :show="showEdit" :employee="selectedEmployee"/>
    <ConfirmDlg :show="showConfirm" :title="confirmTitle" :msg="confirmMsg" />
    <v-btn
      fab
      bottom
      right
      color="teal"
      dark
      fixed
    >
      <v-icon>add</v-icon>
    </v-btn>

  </v-layout>
</template>

<script>
import { mapState } from 'vuex'
import EmployeeDetailsDlg from './EmployeeDetailsDlg'
import EmployeeEditDlg from './EmployeeEditDlg'
import ConfirmDlg from './ConfirmDlg'
export default {

  name: 'ContactList',
  components:{
      EmployeeDetailsDlg,
      EmployeeEditDlg,
      ConfirmDlg
  },
  created(){
      eventBus.$on("employee-details-dialog-closed",this.detailsClosed)
      eventBus.$on("employee-edit-dialog-closed",this.editClosed)
      eventBus.$on("confirm-dialog-closed",this.deleteEmp)
  },
  watch: {
      pagination: {
          handler(){
              this.getData()
          },
          deep: true
      }
  },
  
  data () {
      return {
        showDetails: false,
        showEdit: false,
        showConfirm: false,
        confirmTitle: '',
        confirmMsg: '',
        selectedEmployee: {},
        pagination: {},
        s: '',
        
        //employees: [],
        //totalEmployees: 0,
        headers: [
          {
            text: '员工编号',
            align: 'left',
            sortable: true,
            value: 'id'
          },
          { text: '姓名', value:'name'},
          { text: '性别', value: 'gender' },
          { text: '出生', value: 'birth_date' },
          { text: '所属部门', value: 'department.name' },
          { text: '工作电话', value: 'work_phone', sortable: false, },
          { text: '手机', value: 'mobile_phone', sortable: false, },

          { text: '', value: '',sortable: false}
        ],
        
      }
    },
    computed: {
        
        ...mapState({
            employees : state=>state.employees.data,
            totalEmployees : state=>state.employees.total,
            loading: state=>state.loading

        })
    },
    methods: {
        search(){
            //console.log(event)
            if(event.key=='Enter' || event.target.value.trim()==""){
                this.getData(true)
            }

        },
        getData(reset){
            if(reset) this.pagination.page=1
            const { sortBy, descending, page, rowsPerPage } = this.pagination
              this.$store.dispatch('getData',{
                  order_by:sortBy,
                  order:descending?'desc':'asc',
                  page: reset?1:page,
                  count_per_page: rowsPerPage,
                  s: this.s
                  })
        },
        showEmp(id){
            this.selectedEmployee = this.$store.getters.getEmpById(id)
            this.showDetails = true
        },
        editEmp(id){
            this.selectedEmployee = this.$store.getters.getEmpById(id)
            this.showEdit = true
        },
        confirmDeletingEmp(id){
            this.selectedEmployee = this.$store.getters.getEmpById(id)
            this.confirmTitle = "您确信要删除以下联系人吗？"
            this.confirmMsg = this.selectedEmployee.emp_id + " " + this.selectedEmployee.name
            this.showConfirm = true
        },
        deleteEmp(confirm){
            this.showConfirm = false
            if(confirm){
                this.$store.dispatch('deleteEmp',this.selectedEmployee.emp_id)
            }
        },
        detailsClosed(){
            //this.selectedEmployee = null
            this.showDetails = false
        },
        editClosed(){
            this.showEdit = false
        }

    }
}
</script>


